<template>
    <div class="arrears">
        <div style="text-align:center;font-family:'微软雅黑';color:blue;font-size:20px">
            欠费查询
        </div>
        <br>
        <div>
    <el-table
    :data="user" 
    border
    style="width: 1351px">
    <el-table-column
      fixed
      prop="card"
      label="用户卡号"
      width="130">
    </el-table-column>
    <el-table-column
      prop="userName"
      label="姓名"
      width="130">
    </el-table-column>
    <el-table-column
      prop="phone"
      label="联系电话"
      width="130">
    </el-table-column>
    <el-table-column
      prop="waterMeterId"
      label="水表id"
      width="130">
    </el-table-column>
    <el-table-column
      prop="waterNum"
      label="用水量 立方米"
      width="130">
    </el-table-column>
    <el-table-column
      prop="price"
      label="单价 元/立方米"
      width="130">
    </el-table-column>
    <el-table-column
      prop="lateFee"
      label="滞纳金"
      width="130">
    </el-table-column>
    <el-table-column
      prop="payMonth"
      label="月份"
      width="130">
    </el-table-column>
    <el-table-column
      prop="owe"
      label="欠费"
      width="130">
    </el-table-column>
        <el-table-column
      fixed="right"
      label="缴费"
      width="130">
      <template slot-scope="scope">
        <el-button @click="handleClick(scope.row)" type="text" size="small">缴费页面</el-button>
      </template>
    </el-table-column>
  </el-table>

        </div>
         
    </div>
</template>
<style>
    .arrears{
        width: 1400px;
        height: 300px;
        position: relative;
        margin: 0 auto;
    }
</style>
<script>
export default {
    name:'Arrears',
    data(){
        return{
             user: [
        //        {
        //        card: '',
        //        userName: '',
        //        phone: '',
        //        waterMeterId: '',
        //        waterNum: '',
        //        price: '',
        //        lateFee: '',
        //        payMonth:'',
        //        owe: '',
        // }
        ],
        }
    },
    methods:{
        //带参跳转至缴费页面
        handleClick(row){
          console.log(row);
          this.$router.push(
            {
              path:"/payment",
              query:{paymentData:row}
        }
          )
        }
    },
    mounted(){
        this.user[0]=this.$route.query.arrearsData;
    }
    
}
</script>